<template>
  <div>
    <el-card style='margin:10px'>
      <el-form  :model="form" class="demo-form-inline" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span='8'>
            <el-form-item label="拣货单号" required>
              <el-input v-model="form.code" placeholder="拣货单号" style='width:75%' disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label="仓库" required>
              <el-input v-model="form.warehouseName" placeholder="仓库" style='width:75%' disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label="入驻商" required>
              <el-input v-model="form.shipmentName" placeholder="入驻商" style='width:75%' disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='8'>
            <el-form-item label="单据类型" required>
              <el-input v-model="form.typeText" placeholder="单据类型" style='width:75%' disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label="包裹数" required>
              <el-input v-model="form.planPackQuantity" placeholder="包裹数" style='width:75%' disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='16'>
            <el-form-item label="备注">
              <el-input v-model="form.remarks" placeholder="备注" style='width:75%' :disabled='!isShow'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <vxe-table
        ref="xTable"
        border
        resizable
        stripe
        highlight-current-row
        show-footer
        keep-source
        highlight-hover-row
        row-id="id"
        :loading="loading"
        :edit-rules="validRules"
        :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true,  }"
        class="mytable-footer"
        height="400"
        align="center"
        :footer-method="footerMethod"
        :data="tableData"
        :span-method="objectSpanMethod"

      >
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="goodsName" title="商品名称" width="270"></vxe-table-column>
        <vxe-table-column field="goodCode" title="商品编码"  width="120"></vxe-table-column>
        <vxe-table-column field="goodsBarCode" title="商品条码"  width="120"></vxe-table-column>
        <vxe-table-column field="goodsUnitName" title="单位" width="100"></vxe-table-column>
        <vxe-table-column field="combinationQuantity" title="单件数量" width="160" ></vxe-table-column>
        <vxe-table-column field="locationName" title="分配库位"  width="200"></vxe-table-column>
        <vxe-table-column field="distributionQuantity" title="分配数量"  width="120"></vxe-table-column>
        <vxe-table-column field="stockoutQuantity" title="缺货数量"  width="120"></vxe-table-column>
        <vxe-table-column field="status" :formatter="formatterStatus" title="拣货状态"  width="120"></vxe-table-column>
        <vxe-table-column field="pickingQuantity" :edit-render="{}" title="拣货数量" width="120">
          <template v-slot:edit="{ row }">
            <positive-number :value.sync="row.pickingQuantity" @input="refreshSum" :disabled="!isShow" />
          </template>
        </vxe-table-column>
        <!-- <vxe-table-column
          field="pickingQuantity"
          :edit-render="{
            name: 'input',
            attrs: { disabled: !isShow },
            events:{blur:pickingQuantityBlur}
          }"
         title="拣货数量" width="120"></vxe-table-column> -->
        <vxe-table-column field="goodsStatusName" title="库存状态" width="120"></vxe-table-column>
        <vxe-table-column field="inventoryContainerBarCode" title="容器号" width="120"></vxe-table-column>
        <vxe-table-column field="gmtManufacture" title="生产日期" width="200"></vxe-table-column>
        <vxe-table-column field="gmtExpire" title="过期日期"  width="200"></vxe-table-column>
        <vxe-table-column field="receiveLot" title="收货批次" width="120"></vxe-table-column>
        <vxe-table-column field="packTaskCode" title="任务号" width="120"></vxe-table-column>
        <vxe-table-column field="staffName" title="作业人" width="120"></vxe-table-column>
        <vxe-table-column field="remarks" title="备注" width="120"></vxe-table-column>
      </vxe-table>
    </el-card>
    <el-button v-if='isShow' @click="subOk" style="margin-left:45%">确认</el-button>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
import PositiveNumber from '@/views/components/positiveNumber.vue'
import { pickingDate,check } from '@/api/packManagement/prePackaged'
export default {
  name: '拣货单详情',
  components: { PositiveNumber },
  data(){
    return{
      loading:false,
      form:{},
      rules:{},
      isType:true,
      tableData:[],
      isShow:true,
      validRules:{
        pickingQuantity: [
          { required: true, type: 'number', message: '请输入拣货数量' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入数字' }
        ],
      }
    }
  },
  created(){
    let obj = this.$route.query
    this.isShow = obj.isShow === true||obj.isShow === 'true'?true:false
    this.query(obj.code)
  },
  mounted(){
    if(this.isShow){
      this.modifyTitle('pickiDetile', '拣货单')
    }else{
      this.modifyTitle('pickiDetile', '查看拣货单')
    }
  },
  methods:{
    refreshSum() {
      let xTable = this.$refs.xTable
      xTable.updateFooter()
    },
    query(code){
      return pickingDate(code).then(res=>{
        this.form = res.data
        this.tableData = res.data.pickingItemWithRegisterVOList
        this.spanArr = []
        this.contentSpanArr = []
        for (let i = 0; i < this.tableData.length; i++) {
          if (i === 0) {
            this.spanArr.push(1)
            this.pos = 0
            this.contentSpanArr.push(1)
            this.position = 0
          } else {
            // 判断当前元素与上一个元素是否相同(第1和第2列)
            if (this.tableData[i].code === this.tableData[i - 1].code) {
              this.spanArr[this.pos] += 1
              this.spanArr.push(0)
              this.start = 1
            } else {
              this.spanArr.push(1)
              this.pos = i
            }
          }
        }
      })
    },
    pickingQuantityBlur(val,e){
      let value = e.target.value
      let reg=/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
      let bolle = reg.test(value)
      if(!bolle){
        this.isType = false
        this.$message.error('拣货数量请输入数字')
      }else{
        this.isType = true
      }
    },
    async validAllEvent () {
      const errMap = await this.$refs.xTable.validate(true).catch(errMap => errMap)
      if (errMap) {
        return false
      } else {
        return true
      }
    },
    subOk(){
      if(!this.isType)return this.$message.error('拣货数量请输入数字')
      this.form.pickingItemWithRegisterVOList = this.tableData
      check(this.form).then(res=>{
        this.$eventBus.$emit('refreshList')
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.go(-1)
      }).catch(err=>{

      })
      //this.validAllEvent().then(res=>{
        //console.log(res)
        //if(!res)return this.$message.error('拣货数量请输入数字')

      //})
    },
    formatterStatus({cellValue}){
      if(cellValue === '0')return '未拣货'
      return '已拣货'
    },
    footerMethod ({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 1) {
            return '合计'
          }
          if (['distributionQuantity','stockoutQuantity','pickingQuantity'].includes(column.property)) {
              return XEUtils.sum(data, column.property).toFixed(3)
          }
          return '-'
        })
      ]
    },
     //合并逻辑
    objectSpanMethod({ row, rowIndex, column, columnIndex }) {
      if (this.start === 1) {
        if (

          columnIndex === 1 ||
          columnIndex === 2 ||
          columnIndex === 3 ||
          columnIndex === 4 ||
          columnIndex === 5 ||
          columnIndex === 6 ||
          columnIndex === 7 ||
          columnIndex ===  8
        ) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    },
  }
}
</script>
<style>

</style>
